import React from 'react';
import { View, Text, TouchableOpacity, Platform } from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import {CalendarList, LocaleConfig} from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX} from 'src/util'

import {inject} from 'mobx-react/native'

const _format = 'YYYY-MM-DD'
const _today = moment().format(_format)
const _maxDate = moment().add(62,'days').format(_format)

LocaleConfig.locales['dm'] = {
    monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
		monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    dayNames: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    dayNamesShort: ['日','一','二','三','四','五','六'],
		amDesignator: 'AM',
		pmDesignator: 'PM'
}

LocaleConfig.defaultLocale = 'dm';

@inject('cardManager', 'userAuth')
export default class TestCalendar extends React.Component {

  constructor(props) {
    super(props);

    let initDay = {}
    let dateList = this.props.navigation.state.params.data.plan.date_list;
    for(let key in dateList){
      initDay[dateList[key]] = {selected: true, marked: false, selectedColor: '#ff2121'}
    }
    this.state = {
      _markedDates: initDay
    }
  }

  onDaySelect = (day) => {
    const _selectedDay = moment(day.dateString).format(_format);
    let selected = true;
    if (this.state._markedDates[_selectedDay]) {
      // Already in marked dates, so reverse current marked state
      selected = !this.state._markedDates[_selectedDay].selected;
    }
    
    // Create a new object using object property spread since it should be immutable
    // Reading: https://davidwalsh.name/merge-objects
    const updatedMarkedDates = {...this.state._markedDates, ...{ [_selectedDay]: { selected,  selectedColor: '#3AABDD'} } }
    
    // Triggers component to render again, picking up the new state
    this.setState({ _markedDates: updatedMarkedDates});
  }

  onConfirmSelectedDay = () => {
    let selectdDay = []
    let planData = this.props.navigation.state.params.data
    for(let day in this.state._markedDates){
      if(this.state._markedDates[day].selected === true){
        selectdDay.push(day)
      }
    }
    navigationhelper.navigate('MakePlanDetailView')
    selectdDay = selectdDay.sort();
    this.props.navigation.state.params.callback(selectdDay)
  }
    
  render() {
    return (
      <View style={{flex: 1}}>
            <NavBar 
                back ={()=>{navigationhelper.goBack() }} 
                pressRight={()=>{
                  this.onConfirmSelectedDay()
                }}
                title={"计划日期"}
                titleColor={'#000'} 
                barStyle={'dark-content'}
                right={<Text style={{fontSize: 16, color: '#ff2121', fontFamily: 'PingFang SC'}}>
                {'确定'}
              </Text>}
            />

            <CalendarList
              // we use moment.js to give the minimum and maximum dates.
              //  minDate={_today}
              //  maxDate={_maxDate}

              // hideArrows={true}
              theme={{
                backgroundColor:'red',
                dotColor:'red',
                todayTextColor: '#6de3dc',
                selectedDayBackgroundColor: '#ff2121',
                selectedDayTextColor: '#ffffff',
                }}
                firstDay={1}
                minDate={_today}
                maxDate={_maxDate}
                onDayPress={this.onDaySelect}
                markedDates={this.state._markedDates}
                monthFormat={'yyyy年MM月'}
              />


{/* <CalendarList

  theme={{
  todayTextColor: '#6de3dc',
  selectedDayBackgroundColor: '#6de3dc',
  selectedDayTextColor: '#ffffff',
  }}
  // Callback which gets executed when visible months change in scroll view. Default = undefined
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // Enable or disable scrolling of calendar list
  scrollEnabled={true}
  // Enable or disable vertical scroll indicator. Default = false
  showScrollIndicator={true}

  onDayPress={this.onDayPress}

  markedDates={{
    [this.state.selectDays]: {selected:true}
  }}
  
  /> */}
  </View>
    );
  }
}